<template>
	<view class="page">
		<!-- <view class="search-box">
			<view class="search-top">
				<view class="search-form">
					<uni-icons class="search_icon" type="search" size="18" @click="log"></uni-icons>
					<input @input="searchInput" :value="searchKey" type="text" placeholder="请输入您想要的服务" />
					<uni-icons class="close_icon" type="close" size="18" v-if="search_close" @click="closeInput"></uni-icons>
				</view>
				<view class="action">
					<view class="text-search" @click="log">搜索</view>
				</view>
			</view>
		</view> -->
		<view class="nav">
			<view class="nav_right">
				<view class="search vCenter">
					<input @input="searchInput" :value="searchKey" type="text" placeholder="搜商家，师傅" />
				</view>
			</view>
			<view class="nav_left">
				<view class="position">
					搜索
				</view>
			</view>
		</view>
		<!--搜索区域-->
		<!--搜索记录-->
		<view class="teacher_box">
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../static/img/jing.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
								距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../static/img/ying.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
								距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../static/img/tong.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
								距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
		</view>


	</view>
</template>

<script>
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				search_close: false,
				searchKey: '',
				History: [],
				deleteView: false,
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'History',
				success: (res) => {
					this.History = res.data;
					console.log(this.History.length )
					if(this.History.length == 0){
						this.deleteView = false;
					}else{
						this.deleteView = true;
					}
					
				}
			});
		},
		onReady() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		methods: {
			searchInput(event) {
				let value = event.detail.value;
				this.searchKey = value;
				if (value) {
					this.search_close = true;
				} else {
					this.search_close = false;
					return false
				}
			},
			closeInput() {
				this.searchKey = '';
				this.search_close = false;
			},
			log() {
				if (this.searchKey.trim().length !== 0 && this.searchKey.trim() !== '') {
					this.search_close = false;
					this.History.unshift(this.searchKey)
					this.searchKey = ""
					this.deleteView = true;
					// 将浏览记录存储在内存里
					uni.setStorage({
						key: 'History',
						data: this.History
					});
					console.log(this.History)
					// uni.navigateTo({
					// 	url:''
					// })
				}
			},
			//  这里是引用弹出框自带的函数  open显示  close关闭
			open() {
				this.$refs.showtip.open()
			},
			cancel(type) {
				if (type == 'true') {
					this.deleteView = false;
					this.History = [];
					//  清楚缓存的数据
					uni.setStorage({
						key: 'History',
						data: [],
						success: ()=> {
							this.deleteView = false
						}
					});
				}
				this.$refs.showtip.close()
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.nav {
		display: flex;
		background-color: #368AFF;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	
		.nav_left {
			.position {
				box-sizing: border-box;
				display: flex;
				width: 80rpx;
				height: 70rpx;
				border-radius: 35rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				text-align: center;
				color: #fff;
	
				.position_icon {
					margin-right: 10rpx;
					vertical-align: middle;
				}
			}
		}
	
		.nav_right {
			flex: 1;
			margin-right: 30rpx;
	
			.search {
				box-sizing: border-box;
				width: 100%;
				height: 70rpx;
				border-radius: 35rpx;
				background-color: #FFFFFF;
				color: #B3B3B3;
				line-height: 70rpx;
				margin: 0 10rpx 0 0rpx;
				padding: 0 33rpx;
				font-size: 26rpx;
				input {
					width: 100%;
				}
				.search_icon {
					vertical-align: middle;
				}
			}
	
		}
	}

	.teacher_box {
		padding: 0 33rpx;
			.mechanism_main_item {
				box-sizing: border-box;
				display: flex;
				width: 100%;
				margin-bottom: 12rpx;
				padding: 20upx 25rpx;
				background-color: #ffffff;
				border-bottom: 1px solid #E2E2E2 ;
				&:last-child {
					border-bottom: none;
				}
				.mechanism_main_item_left {
					flex: 0 0 160rpx;
					width: 161rpx;
					height: 161rpx;
					margin-right: 30rpx;
					overflow: hidden;
		
					image {
						display: block;
						margin: 0rpx auto;
						width: 100%;
						min-height: 100%;
					}
				}
		
				.mechanism_main_item_right {
					flex: 1;
					box-sizing: border-box;
					position: relative;
					.text1 {
						line-height: 45rpx;
						margin-bottom: 16rpx;
						.title {
							max-width: 300rpx;
							line-height: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 32rpx;
						}
		
						image {
							display: block;
							margin-left: 12rpx;
							width: 31rpx;
							height: 31rpx;
						}
					}
		
					.text2 {
						margin-bottom: 6rpx;
						view {
							font-size: 24rpx;
		
							text {
								display: inline-block;
								border: 1px solid #368AFF;
								height: 32rpx;
								margin-right: 16rpx;
								padding: 0 16rpx;
								line-height: 32rpx;
								border-radius: 16rpx;
								color: #368AFF;
							}
						}
					}
		
					.text3 {
						margin-bottom: 10rpx;
						view {
							.pingfen {
								display: inline-block;
							}
						}
						}
					}
					.text4 {
						font-size: 25rpx;
						color: #B3B3B3;
						line-height: 100%;
					}
					.serverNum {
						position: absolute;
						right: 0;
						bottom: 39rpx;
						font-size: 25rpx;
						color: #B3B3B3;
				}
			}
		
	}
</style>
